/**
 * @author Hilary
 * @date 2019/08/28
 * @description 自定义样式主题，对应不同主题下的样式文件
 */

/* 默认主题 */
$default-theme : (base-color: #ddd,
    border-color: #000,
    bg-color: #307BC8, // background color...
    hover-color: rgba(11, 49, 87, 0.35), // hover color...
    active-color: #6bb3fd, // dom is actived color...
    default-color: #e0efff, // text default color...
    cont-color: #f9f9f9 // right nav background color...
);
/* 红色主题 */
$green-theme : (base-color: green,
    border-color: blue,
    bg-color: rgb(16, 143, 16),
    hover-color: rgba(47, 108, 168, 0.35),
    active-color: rgb(15, 204, 15),
    default-color: #d5fcd5,
    cont-color: #f9f9f9);
/* 橙色主题 */
$orange-theme : (base-color: #642c07,
    border-color: yellow,
    bg-color: rgb(194, 96, 17),
    hover-color: rgba(197, 122, 9, 0.35),
    active-color: #fd9838,
    default-color: #ffe6d5,
    cont-color: #f9f9f9);

/* 定义映射集合 */
$themes: (default-theme: $default-theme,
    green-theme: $green-theme,
    orange-theme: $orange-theme);

/* 遍历方法 change background... */
@mixin base-background($falg: true) {

    @each $name,
    $value in $themes {
        [data-theme='#{$name}'] & {
            @if $falg {
                background-color: map-get($map: $value, $key: bg-color);
            }

            @else {
                color: map-get($map: $value, $key: bg-color);
            }
        }
    }
}

/* change default text color... */
@mixin base-color($falg: true) {

    @each $colorName,
    $colorValue in $themes {
        [data-theme='#{$colorName}'] & {
            @if $falg {
                color: map-get($map: $colorValue, $key: default-color);
            }

            @else {
                background-color: map-get($map: $colorValue, $key: default-color);
            }
        }
    }
}

/* change hover background color... */
@mixin base-hover() {

    @each $name,
    $value in $themes {
        [data-theme='#{$name}'] & {
            background-color: map-get($map: $value, $key: hover-color);
        }
    }
}

/* change active text color... */
@mixin base-active() {

    @each $colorName,
    $colorValue in $themes {
        [data-theme='#{$colorName}'] & {
            color: map-get($map: $colorValue, $key: active-color);
        }
    }
}

/* change right content background color... */
@mixin base-cont-color() {

    @each $name,
    $value in $themes {
        [data-theme='#{$name}'] & {
            background-color: map-get($map: $value, $key: cont-color);
        }
    }
}

/* change bar border right color... */
@mixin base-border() {

    @each $name,
    $value in $themes {
        [data-theme='#{$name}'] & {
            border-right: map-get($map: $value, $key: bg-color);
        }
    }
}